<template>
	<view class="">
		<!-- 自定义导航栏 -->
		<view class="status_bar" :style="{ height: height + 66 + 'px' }">
			<view @click="back" class="back" style=""><image style="" src="../../static/img/leftArrow.png" mode=""></image></view>
		</view>
		<view class="b_Box" v-if="busInfoList">
			<!-- 头部组件 -->
			<businfoHead :question="question" :refund="refund"></businfoHead>
			<view class="price">
				<view class="title">价格详情</view>
				<view class="b_Boxs">
					<view class="box">
						<view class="">单价:</view>
						<view class="">{{ busInfoList.price }}</view>
					</view>
					<view class="box">
						<view class="">乘意险:</view>
						<view class="">{{ busInfoList.insureMoney }}</view>
					</view>
					<view class="box">
						<view class="">技术服务费:</view>
						<view class="">{{ busInfoList.totalFee }}</view>
					</view>
					<view class="box">
						<view class="">乘车人:</view>
						<view class="">{{ userName }}</view>
					</view>
					<view class="box">
						<view class="">订单号:</view>
						<view class="">{{ busInfoList.ticketOrderResponse.orderCode }}</view>
					</view>
				</view>
				<view class="box" style="width: 94%;margin: auto;">
					<view class="">订单总额:</view>
					<view class="">{{ busInfoList.shoudPay }}</view>
				</view>
			</view>
			<view class="agreement">
				<checkbox-group>
					<label>
						<checkbox value="cb" checked="isChecked" @click="isChecked = !isChecked" />
						同意
					</label>
					<text @click="protocol" style="color:#586C94;">《购票协议》</text>
				</checkbox-group>
			</view>
			<view id="payBtn" @click="pay">确认支付</view>
			<!-- 加载中 -->
			<ourLoading isFullScreen text="加载中..." :active="active"></ourLoading>
		</view>
	</view>
</template>

<script>
import utils from '@/static/common/utils.js';
import value from '@/static/value/value.js';
import businfoHead from '@/pages/views/businfoHead/businfoHead.vue';
export default {
	data() {
		return {
			question: value.value.JSONData.question,
			busInfoList: null,
			storageBus: value.value.busInfoMsg,
			startDate: utils.utils.NewDate(value.value.busInfoMsg.startDate),
			userName: '',
			userId: [],
			insureId: 0,
			btnLoading: false,
			isChecked: true,
			active: true,
			height: null, //获取的状态栏高度
			refund: ''
		};
	},
	components: {
		businfoHead
	},
	onLoad(options) {
		var that = this;
		uni.getStorage({
			key: 'departStation',
			success: function(res) {
				that.refund = res.data.isCanRefund;
			}
		});
		// 获取手机状态栏高度
		uni.getSystemInfo({
			success: function(data) {
				// 将其赋值给this
				that.height = data.statusBarHeight;
			}
		});
		this.insureId = options.bid;
		var userId = String(options.id).split(',');
		var userArr = [];
		userId.forEach((item, index) => {
			userArr.push({ id: Number(item) });
		});
		this.userId = userArr;
		this.getData();
	},
	methods: {
		protocol() {
			uni.navigateTo({
				url: '../views/webHTML/webHTML?index=1'
			});
		},
		getData() {
			const that = this;
			let obj = {
				globalcode: value.value.busInfoMsg.globalCode,
				target: value.value.busInfoMsg.targetName,
				busNum: value.value.busInfoMsg.busnum,
				startDate: value.value.busInfoMsg.startDate,
				insureId: this.insureId,
				takemans: this.userId,
				ticks: utils.utils.GetTicks(),
				channel: this.$tokenObj.obj.channel
			};
			obj.sign = utils.utils.GetSign(obj);
			this.$http
				.request({
					url: `/Order/CreateOrder`,
					method: 'post',
					data: obj
				})
				.then(res => {
					this.active = false;
					if (res.data.result == false) {
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack({});
								} else if (res.cancel) {
								}
							}
						});
					}
					if (!res.data.result) {
						this.$ut.Msg(res.data.msg, true);
						return;
					}
					this.busInfoList = res.data;
					this.userName = res.data.takemans.join(',');
				})
				.catch(err => {
					console.log(err);
				});
		},

		// 用户支付
		pay() {
			if (this.isChecked === false) {
				this.$ut.Msg('勾选《购票协议》后才能购票呦~');
				return false;
			}
			if (this.btnLoading) {
				return;
			}
			this.btnLoading = true;
			const that = this;
			let dataReq = {
				orderCode: that.busInfoList.ticketOrderResponse.orderCode,
				couponId: '',
				ticks: utils.utils.GetTicks(),
				channel: this.$tokenObj.obj.channel
			};
			dataReq.sign = utils.utils.GetSign(dataReq);
			this.$http
				.request({
					url: '/Wechat/WechatPayOrder',
					method: 'POST',
					data: dataReq
				})
				.then(res => {
					if (!res.data.result) {
						that.btnLoading = false;
						return;
					}
					setTimeout(function() {
						that.btnLoading = false;
					}, 1000);
					uni.requestPayment({
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.noncestr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: res => {
							uni.navigateTo({
								url: '../prosperity/prosperity?code=' + this.busInfoList.ticketOrderResponse.orderCode
							});
						},
						fail: err => {
							console.log('fail:' + JSON.stringify(err));
						}
					});
				})
				.catch(err => {
					that.btnLoading = false;
					console.log(err);
				});
		},
		uniPay() {},
		// 自定义监听返回
		back() {
			uni.showModal({
				title: '提示',
				content: '请在未完成订单中处理该订单,否则六分钟内无法重复预定!',
				// showCancel: false,
				success: function(res) {
					if (res.confirm) {
						uni.switchTab({
							url: '../order/order'
						});
					} else if (res.cancel) {
					}
				}
			});
		}
	}
};
</script>

<style scoped>
#payBtn {
	width: 94%;
	line-height: 100upx;
	font-size: 36upx;
	background-color: #01a1e9;
	color: #ffffff;
	margin: 50rpx auto 0 auto;
	border-radius: 10upx;
	text-align: center;
}
.b_Box {
	width: 100%;
	height: 100%;
	background: linear-gradient(#01a1ea, #ffffff);
}

.price {
	width: 94%;
	margin: auto;
	margin-top: 20upx;
	border-radius: 15upx;
	background-color: #ffffff;
}
.title {
	font-size: 35upx;
	padding: 20upx 30upx;
}
.b_Boxs {
	width: 94%;
	margin: auto;
	border-top: 1upx solid #cccccc;
	border-bottom: 1px solid #cccccc;
}
.box {
	display: flex;
	justify-content: space-between;
	padding: 15upx 0;
}
.agreement {
	width: 94%;
	margin: 15upx auto;
}
.status_bar {
	width: 100%;
	background: #01a1ea;
	position: relative;
}
.back {
	width: 45upx;
	height: 45upx;
	padding-top: 9%;
	padding-left: 3%;
}
.back image {
	width: 100%;
	height: 100%;
}
</style>
